<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        p{
            font-size: 15px;
            color: green;
            font-weight: bold;
        }
        #box1{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-image: url("img/tx.jpg");
        }
        #box2{
            width: 100px;
            height: 50px;
            background-color: aqua;
            border-radius: 20% 20% 20% 20%;
        }
        #box2>p{
            color: white;
            font-size: 15px;
            line-height: 50px;
            text-align: center;
        }
        #box3{
            width: 100px;
            height: 50px;
            background-color: aqua;
            border-radius: 0 20% 20% 0;
        }
        #box3>p{
            color: white;
            font-size: 15px;
            line-height: 50px;
            text-align: center;
        }
        #box4{
            width: 100px;
            height: 50px;
            background-color: aqua;
            border-radius:20% 0 0 20% ;
        }
        #box4>p{
            color: white;
            font-size: 15px;
            line-height: 50px;
            text-align: center;
        }
        #box5{
            width: 100px;
            height: 30px;
            border: 10px solid red;
            border-image-source: url("img/border_image_button.png");
            border-image-slice: 0 14 0 14;
        }
        #box6{
            width: 100px;
            height: 50px;
            background-color: aqua;
            box-shadow: 5px 5px 5px 5px grey;

        }
        #box6>p{
            color: white;
            font-size: 15px;
            line-height: 50px;
            text-align: center;
        }
        #box7{
            font-size: 15px;
            color: aqua;
            text-shadow: 5px 5px 5px grey;
        }

    </style>
</head>
<body>
<p>圆形</p>
    <div id="box1"></div>
<p>圆角</p>
    <div id="box2"><p>圆角</p></div>
<p>右上角 右下角</p>
    <div id="box3"><p>圆角</p></div>
<p>左上角 左下角</p>
    <div id="box4"><p>圆角</p></div>
<p>边框背景</p>
    <div id="box5">边框背景</div>
<p>盒子阴影</p>
    <div id="box6"><p>盒子阴影</p></div>
<br/>
<br/>
    <div id="box7">我是文本阴影</div>
<br/>
<br/>
</body>
</html>